<template>
	<view>
		<!-- 搜索栏和轮播图部分 -->
		<uni-search-bar @confirm="search"></uni-search-bar>
		<swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"
			indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371">
			<swiper-item v-for="item in newsList" :key="item.id">
				<navigator :url="'/pages/detail/newsDetail?id=' + item.id">
					<image :src="item.avatar" alt="" mode="widthFix" style="width: 100%;" />
					<view style="position: absolute; bottom: 10rpx; left: 10rpx; color: #fff; background-color: rgba(0,0,0,0.5); padding: 5rpx; border-radius: 5rpx;">
						{{ item.title }}
					</view>
				</navigator>
			</swiper-item>
		</swiper>

		<view v-for="(courses, category) in categorizedCourses" :key="category" class="category-section">
			<view class="category-title">{{ category }}</view>
			<view class="course-container">
				<view v-for="course in courses" :key="course.course" class="course-box" @click="onCourseClick(course)">
					<image :src="course.avatar" alt="" class="course-image" />
					<view class="course-name">{{ course.course }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				courseList: [],
				userInfo: null, // 用户信息
				role: '' // 角色信息
			}
		},
		computed: {
			// 按课程大类分类
			categorizedCourses() {
				return this.courseList.reduce((result, course) => {
					(result[course.category] = result[course.category] || []).push(course);
					return result;
				}, {});
			}
		},
		onLoad() {
			this.loadUserInfo(); // 加载用户信息
			this.loadNews();
			this.loadCourses();
		},
		methods: {
			// 加载缓存中的用户和角色信息
			loadUserInfo() {
				const storedUser = uni.getStorageSync('xm-user'); // 从缓存中获取用户信息
				if (storedUser) {
					this.userInfo = storedUser; 
					this.role = storedUser.role;
					 console.log(this.role);// 获取用户角色
				} else {
					uni.showToast({
						icon: 'error',
						title: '未登录，请先登录'
					});
					// 跳转到登录页面
					uni.redirectTo({
						url: '/pages/login/login'
					});
				}
			},
			search(res) {
				let value = res.value;
				uni.navigateTo({
					url: '/pages/search/search?name=' + value
				});
			},
			loadNews() {
				this.$request.get('/news/selectAll').then(res => {
					if (res.code === '200') {
						this.newsList = res.data || [];
					} else {
						console.error('获取新闻数据失败:', res.msg);
					}
				}).catch(error => {
					console.error('请求失败:', error);
				});
			},
			loadCourses() {
				this.$request.get('/classification/selectAll').then(res => {
					if (res.code === '200') {
						this.courseList = res.data || [];
					} else {
						console.error('获取课程数据失败:', res.msg);
					}
				}).catch(error => {
					console.error('请求失败:', error);
				});
			},
			// 点击课程图片跳转
			onCourseClick(course) {
				let targetUrl = '';
				
				// 根据角色决定跳转的页面
				if (this.role === 'teacher') {
					targetUrl = `/pages/need/need?course=${course.course}`;
				} else if (this.role === 'user') {
					targetUrl = `/pages/teach/teach?course=${course.course}`;
				} else {
					uni.showToast({
						icon: 'error',
						title: '角色信息缺失'
					});
					return;
				}

				uni.navigateTo({
					url: targetUrl
				});
			}
		}
	}
</script>

<style>
	.category-section {
		margin-top: 30rpx;
	}
	.category-title {
		font-size: 36rpx;
		font-weight: bold;
		padding: 20rpx;
		background-color: #f2f2f2;
		border-left: 5rpx solid #3CB371;
	}
	.course-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-top: 10rpx;
	}
	.course-box {
		width: 45%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 5rpx rgba(0,0,0,0.1);
		text-align: center;
	}
	.course-image {
		width: 100%;
		height: 200rpx;
		object-fit: cover;
	}
	.course-name {
		font-size: 30rpx;
		font-weight: bold;
		padding: 10rpx 0;
		color: #333;
	}
</style>
